<template>
  <div class="topic-list-card__wrap">
    <nuxt-link :to="'/topic/detail/'+info.topicName" class="topic-list-card">
      <div class="topic-list-card__left">{{number}}</div>
      <div class="topic-list-card__center">
        <span>{{info.topicName}}</span>
        <span>{{info.degree}}℉</span>
      </div>
      <div class="topic-list-card__right">
        <div class="icon-box" v-if="number===1">
          <yun-icon name="top" size="13px"></yun-icon>
        </div>
        <div class="word-box" v-if="number===3||number===6||number===9" v-for="(item,key) in label" :key="key">
          <span>{{item}}</span>
        </div>
      </div>
    </nuxt-link>
  </div>
</template>

<script>
export default {
  name: "topicListCard",
  data(){
    return{
      isTop: false,
      label:['新','热']
    }
  },
  props:{
    info:{
      type:Object,
      default:()=>({})
    },
    number:Number

  },
}
</script>

<style lang="scss" scoped>
.topic-list-card__wrap{
  background-color: #fff;
  .topic-list-card{
    width: 1044*$length;
    margin-top: 5*$length;
    margin-bottom: 5*$length;

    padding-top:10*$length;
    padding-bottom:10*$length;
    @extend %flex-row-spb;
    justify-content: flex-start;
    @extend %animate-transition;
    @extend %cursorPointer;
    &:hover{
      background-color: #F4F8FA;
      @include border-radius(4*$length);
      > .topic-list-card__center{
        span{
          &:first-child{
            color:#00AAE6;
          }
        }
      }
    }
    .topic-list-card__left{
      width: 110*$length;
      @include fontStyle(12,12,500,#222,right);
    }
    .topic-list-card__center{
      width: 424*$length;
      margin-left: 99*$length;
      @include fontStyle(12,17,500,#222,left);
      height:auto;
      > span{
        @extend %animate-transition;
        &:last-child{
          margin-left: 24*$length;
          @include fontStyle(12,12,500,#999,left);
        }
      }
    }
    .topic-list-card__right{
      @extend %flex-row-center;
      justify-content: flex-start;
      .icon-box{
        width: 22*$length;
        height: 22*$length;
        margin-right: 5*$length;
        color: #fff;
        background-color: #00AAE6;
        @include border-radius(2*$length);
        @extend %flex-row-center;
        @extend %cursorPointer;
      }
      .word-box{
        width: 22*$length;
        height: 22*$length;
        margin-right: 5*$length;
        color: #fff;
        background-color: #F8A06F;
        @include border-radius(2*$length);
        @extend %flex-row-center;
        @extend %cursorPointer;
      }
    }
  }
}
</style>
